表单输入
表单输入
表单输入绑定(v-model), v-model 可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合
- 文本类型的
<input>
和<textarea>
元素会绑定 value property 并侦听 input 事件; <input type="checkbox">
和<input type="radio">
会绑定 checked property 并侦听 change 事件;<select>
会绑定 value property 并侦听 change 事件。
v-model
示例 1:文本输入框
html
<template>
<input v-model="message" type="text" />
<p>{{ message }}</p>
</template>
<script setup>
import { ref } from "vue";
const message = ref("");
</script>
上述示例中,使用了 <input>
元素的 v-model
指令来将输入框的值与 message
变量进行双向绑定。当输入框的值发生改变时,message
变量也会自动更新,反之亦然。
示例 2:复选框
html
<template>
<input v-model="checked" type="checkbox" />
<p>{{ checked ? 'Checked' : 'Not Checked' }}</p>
</template>
<script setup>
import { ref } from "vue";
const checked = ref(false);
</script>
上述示例中,使用了 <input>
元素的 v-model
指令来将复选框的选中状态与 checked
变量进行双向绑定。当复选框的选中状态改变时,checked
变量也会自动更新,反之亦然。
注意事项
在 Vue 3 中,复选框的 v-model
绑定的是一个布尔值,而不是复选框的值本身。如果你希望绑定其他值,请参考后续的示例。
示例 3:单选框
html
<template>
<label>
<input v-model="radio" type="radio" value="option1" />
Option 1
</label>
<label>
<input v-model="radio" type="radio" value="option2" />
Option 2
</label>
<p>Selected option: {{ radio }}</p>
</template>
<script setup>
import { ref } from "vue";
const radio = ref("option1");
</script>
上述示例中,使用了多个单选框,并将它们的值与 radio
变量进行绑定。通过设置 v-model
的 value
属性,可以指定单选框对应的值。当选择不同的单选框时,radio
变量的值也会相应地更新。
注意事项
在 Vue 3 中,单选框的 v-model
绑定的是选中的值,而不是布尔值。因此, v-model
属性的值应与每个单选框的 value
属性对应起来。
示例 4:下拉框
html
<template>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<p>Selected option: {{ selected }}</p>
</template>
<script setup>
import { ref } from "vue";
const selected = ref("");
</script>
上述示例中,使用了 <select>
元素,并将其选中的值与 selected
变量进行绑定。通过给每个 <option>
元素设置相应的 value
属性,可以指定下拉选择框中的选项。当选择不同的选项时,selected
变量的值也会相应地更新。
注意事项
在 Vue 3 中,下拉选择框的 v-model
绑定的是选中的值。为了确保首先禁用的选项不会成为默认选中,需要添加一个具有空字符串值的禁用选项。